<template>
  <div class="min-h-screen">
    <NavBar />
    <div class="gallery-container pt-32 sm:pt-36">
      <div class="gallery-header">
        <h1>我的相册</h1>
        <p>记录精彩瞬间，珍藏美好回忆</p>
        
        <div v-if="photoStore.error || uploadError" class="mt-4 px-4 py-2 bg-red-500/10 text-red-400 rounded-lg mx-auto max-w-md">
          {{ photoStore.error || uploadError }}
        </div>

        <div class="flex flex-col sm:flex-row gap-3 justify-center mt-8 px-4">
          <button
            @click="toggleSelectionMode"
            class="w-full sm:w-auto px-6 py-3 sm:py-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors text-sm sm:text-base"
          >
            {{ isSelectionMode ? '退出选择' : '选择照片' }}
          </button>
          <button
            @click="toggleUpload"
            class="w-full sm:w-auto px-6 py-3 sm:py-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors text-sm sm:text-base"
          >
            上传照片
          </button>
        </div>
      </div>

      <div v-if="showUpload" class="max-w-2xl mx-auto mb-12 px-4">
        <ImageUpload @upload="handleUpload" />
      </div>

      <SelectionGrid
        v-if="isSelectionMode"
        :photos="photoStore.photos"
      />
      
      <div v-else class="gallery-grid">
        <PhotoCard
          v-for="photo in photoStore.photos"
          :key="photo.id"
          :photo="photo"
          :onPhotoClick="openPhotoModal"
          :onDeleteClick="openDeleteDialog"
        />
      </div>
    </div>
    
    <PhotoModal
      :photo="selectedPhoto"
      :isOpen="isModalOpen"
      :onClose="closePhotoModal"
    />

    <DeleteConfirmDialog
      :photo="photoToDelete"
      :isOpen="isDeleteDialogOpen"
      :onClose="closeDeleteDialog"
      :onConfirm="confirmDelete"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { usePhotoStore } from '../stores/photoStore';
import { compressImage } from '../utils/imageUtils';
import PhotoCard from './PhotoCard.vue';
import PhotoModal from './PhotoModal.vue';
import DeleteConfirmDialog from './DeleteConfirmDialog.vue';
import NavBar from './NavBar.vue';
import SelectionGrid from './SelectionGrid.vue';
import ImageUpload from './ImageUpload.vue';
import type { Photo } from '../types';

const photoStore = usePhotoStore();
const selectedPhoto = ref<Photo | null>(null);
const photoToDelete = ref<Photo | null>(null);
const isModalOpen = ref(false);
const isDeleteDialogOpen = ref(false);
const isSelectionMode = ref(false);
const showUpload = ref(false);
const uploadError = ref('');

onMounted(() => {
  photoStore.loadPhotos();
});

const openPhotoModal = (photo: Photo) => {
  if (!isSelectionMode.value) {
    selectedPhoto.value = photo;
    isModalOpen.value = true;
  }
};

const closePhotoModal = () => {
  isModalOpen.value = false;
  setTimeout(() => {
    selectedPhoto.value = null;
  }, 200);
};

const openDeleteDialog = (photo: Photo) => {
  photoToDelete.value = photo;
  isDeleteDialogOpen.value = true;
};

const closeDeleteDialog = () => {
  isDeleteDialogOpen.value = false;
  setTimeout(() => {
    photoToDelete.value = null;
  }, 200);
};

const confirmDelete = () => {
  if (photoToDelete.value) {
    try {
      photoStore.deletePhoto(photoToDelete.value.id);
    } catch (err) {
      uploadError.value = err instanceof Error ? err.message : '删除照片失败';
    }
  }
  closeDeleteDialog();
};

const toggleSelectionMode = () => {
  isSelectionMode.value = !isSelectionMode.value;
};

const toggleUpload = () => {
  showUpload.value = !showUpload.value;
  uploadError.value = '';
  photoStore.clearError();
};

const handleUpload = async (files: File[]) => {
  uploadError.value = '';
  for (const file of files) {
    try {
      const compressedImage = await compressImage(file);
      const newPhoto: Photo = {
        id: Date.now() + Math.random(),
        url: compressedImage,
        title: file.name.replace(/\.[^/.]+$/, ""),
        description: `上传于 ${new Date().toLocaleDateString()}`
      };
      await photoStore.addPhoto(newPhoto);
    } catch (err) {
      uploadError.value = err instanceof Error ? err.message : '上传照片失败';
      break;
    }
  }
  if (!uploadError.value) {
    showUpload.value = false;
  }
};
</script>

<style scoped lang="scss">
.gallery-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  
  @media (min-width: 640px) {
    padding: 2rem;
  }
}

.gallery-header {
  text-align: center;
  margin-bottom: 2rem;
  
  @media (min-width: 640px) {
    margin-bottom: 4rem;
  }
  
  h1 {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(to right, #fff, #ccc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
    padding: 0 1rem;
    
    @media (min-width: 640px) {
      font-size: 3.5rem;
      margin-bottom: 1rem;
    }
  }
  
  p {
    font-size: 1rem;
    color: #999;
    
    @media (min-width: 640px) {
      font-size: 1.2rem;
    }
  }
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
  padding: 0.5rem;
  
  @media (min-width: 640px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 1rem;
  }
  
  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}
</style>